<template>
	<view class="container">
		<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ use: false }" :up="upOption"
			@up="upCallback">

			<!-- tab栏 -->
			<u-tabs style="background-color: #fff;" :list="tabs" :current="curTab" :activeStyle="{color:'#FF0000'}"
				@click="onChangeTab"></u-tabs>


			<!-- 优惠券列表 -->
			<view class="coupon-list">
				<view class="coupon-item" v-for="(item, index) in list.data" :key="index">
					<view class="item-wrapper" :class="['color-' + (color[item.status])]">
						<!-- <view class="coupon-type">{{ CouponTypeEnum[item.coupon_type].name }}</view> -->
						<view class="tip dis-flex flex-dir-column flex-x-center">
							<view>
								<text class="f-30">￥</text>
								<text class="money">{{ item.price }}</text>
							</view>
							<text class="pay-line">满{{ item.priceLine }}元可用</text>
						</view>
						<view class="split-line"></view>
						<view class="content">
							<view class="contTop">
								<view class="title">{{ item.name }}</view>
								<view class="btn" v-if="item.status == 1">
									<u-button size="mini" color="#ff3636" shape="circle" text="立即使用"></u-button>
								</view>
							</view>
							<view class="bottom dis-flex flex-y-center">
								<view class="time flex-box">
									<block v-if="item.validityPeriod == 1">{{ item.startValidityPeriod }} 当天有效</block>
									<block v-else>
										有效期 {{ dayjs(item.startTime).format("YYYY-MM-DD") }} -
										{{dayjs(item.endTime).format("YYYY-MM-DD") }}
									</block>
								</view>
								<view class="receive state">
									<!-- <text>{{ item.state.text }}</text> -->
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins'
	import {
		getEmptyPaginateObj,
		getMoreListData
	} from '@/core/app'
	import {
		getCoupon
	} from '@/api/coupon'
	import {
		CouponTypeEnum
	} from '@/utils/enum/cpupon/index.js'

	const pageSize = 15
	import dayjs from 'dayjs'
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				dayjs: dayjs,
				clientId: uni.getStorageSync("mUserinfo").user_id,
				// 枚举类
				CouponTypeEnum,
				// 颜色组
				color: ['red', 'red', 'blue', 'gray'],
				// 标签栏数据
				tabs: [{
					name: `可使用`,
					value: 1
				}, {
					name: `已使用`,
					value: 2
				}, {
					name: `已过期`,
					value: 3
				}],
				// 当前标签索引
				curTab: 0,
				status: 1,
				// 优惠券列表数据
				list: {
					data: [], // 列表数据
					current_page: 1, // 当前页码
					last_page: 1, // 最大页码
					per_page: 15, // 每页记录数
					total: 0, // 总记录数
				},
				// 上拉加载配置
				upOption: {
					// 首次自动执行
					auto: true,
					// 每页数据的数量; 默认10
					page: {
						size: pageSize
					},
					// 数量要大于4条才显示无更多数据
					noMoreSize: 4,
					// 空布局
					empty: {
						tip: '亲，暂无相关优惠券'
					}
				}
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {

		},

		methods: {

			/**
			 * 上拉加载的回调 (页面初始化时也会执行一次)
			 * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
			 * @param {Object} page
			 */
			async upCallback(page) {

				const res = await getCoupon({
					current: page.num,
					size: 15,
					clientId: this.clientId,
					status: this.status
				})
				const newList = res.records
				this.list.data = getMoreListData(newList, this.list.data, page.num)
				const curPageLen = res.records.length
				const totalSize = res.total
				this.mescroll.endBySize(curPageLen, totalSize)
			},

			/**
			 * 获取优惠券列表
			 */
			// getCouponList(pageNo = 1) {
			// 	const app = this
			// 	return new Promise((resolve, reject) => {
			// 		MyCouponApi.list({
			// 				dataType: app.getTabValue(),
			// 				page: pageNo
			// 			}, {
			// 				load: false
			// 			})
			// 			.then(result => {
			// 				// 合并新数据
			// 				const newList = result.data.list
			// 				app.list.data = getMoreListData(newList, app.list, pageNo)
			// 				resolve(newList)
			// 			})
			// 	})
			// },

			// 评分类型
			// getTabValue() {
			// 	return this.tabs[this.curTab].value
			// },

			// 切换标签项
			onChangeTab(val) {
				this.status = val.value
				// 刷新优惠券列表
				// app.onRefreshList()
				this.list.data = []
				this.mescroll.resetUpScroll()
			},

			// 刷新优惠券列表
			onRefreshList() {
				// this.list = getEmptyPaginateObj()
				// setTimeout(() => {
				// 	this.mescroll.resetUpScroll()
				// }, 120)
			},

		}
	}
</script>
<style>
	page {
		background: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	//文字平均分配
	
	::v-deep .u-tabs__wrapper__nav[data-v-48634e29] {
		display: flex;
		flex-direction: row;
		position: relative;
		justify-content: space-between;
	}
	
	//选中蓝色滑块对应
	
	::v-deep .u-tabs__wrapper__nav__item {
		flex: 1 1 0% !important;
	}

	.coupon-list {
		padding: 20rpx;
	}


	.coupon-item {
		position: relative;
		overflow: hidden;
		margin-bottom: 22rpx;

	}

	.item-wrapper {
		width: 100%;
		display: flex;
		background: #fff;
		border-radius: 8rpx;
		color: #fff;
		height: 180rpx;

		.coupon-type {
			position: absolute;
			top: 0;
			right: 0;
			z-index: 10;
			width: 128rpx;
			padding: 6rpx 0;
			background: #a771ff;
			font-size: 20rpx;
			text-align: center;
			color: #ffffff;
			transform: rotate(45deg);
			transform-origin: 64rpx 64rpx;
		}

		&.color-blue {
			background: linear-gradient(-125deg, #57bdbf, #2f9de2);
		}

		&.color-red {
			background: linear-gradient(-128deg, #ff6d6d, #ff3636);
		}

		&.color-violet {
			background: linear-gradient(-113deg, #ef86ff, #b66ff5);

			.coupon-type {
				background: #55b5ff;
			}
		}

		&.color-yellow {
			background: linear-gradient(-141deg, #f7d059, #fdb054);
		}

		&.color-gray {
			background: linear-gradient(-113deg, #bdbdbd, #a2a1a2);

			.coupon-type {
				background: #9e9e9e;
			}
		}

		.content {
			flex: 1;
			padding: 20rpx 20rpx;
			border-radius: 16rpx 0 0 16rpx;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			height: 100%;
			justify-content: space-evenly;


			.contTop {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.title {
					font-size: 30rpx;
					font-weight: 700;
					color: #333;
				}

				.btn {
					height: 50rpx;

					.u-button {
						height: 100%;
					}
				}
			}

			.bottom {

				.time {
					color: #999;
					font-size: 24rpx;
				}

				.receive {
					height: 46rpx;
					width: 122rpx;
					border: 1rpx solid #fff;
					border-radius: 30rpx;
					color: #fff;
					font-size: 24rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					&.state {
						border: none;
					}
				}
			}
		}

		.tip {
			display: flex;
			flex-direction: column;
			justify-content: center;
			position: relative;
			flex: 0 0 32%;
			text-align: center;
			border-radius: 0 16rpx 16rpx 0;

			.money {
				font-weight: 700;
				font-size: 45rpx;
			}

			.pay-line {
				font-size: 22rpx;
				margin-top: 10rpx;
			}
		}

		.split-line {
			position: relative;
			flex: 0 0 0;
			border-left: 4rpx solid #fff;
			margin: 0 10rpx 0 6rpx;
			background: #fff;

			&:before,
			{
			border-radius: 0 0 16rpx 16rpx;
			top: 0;
		}

		&:after {
			border-radius: 16rpx 16rpx 0 0;
			bottom: 0;
		}

		&:before,
		&:after {
			content: '';
			position: absolute;
			width: 24rpx;
			height: 12rpx;
			background: #f7f7f7;
			left: -14rpx;
			z-index: 1;
		}


	}
	}
</style>